<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item>
        <el-button
          v-show="mCheck"
          :disabled="!devModel"
          icon="el-icon-delete"
          type="danger"
          @click="mDel"
        >{{ $t('delete') }}
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="deviceCore"
          clearable
          :placeholder="$t('deviceCore')"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="pageGetDeviceSettingHistory"
        >{{ $t('search') }}
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="cardModel ? 'el-icon-tickets' : 'el-icon-folder'"
          @click="cardModel=!cardModel"
        />
      </el-form-item>
    </el-form>
    <el-row v-if="cardModel" :gutter="5">
      <el-col v-for="(item,index) in historyList" :key="index" :span="6">
        <el-card class="box-card mb-1" style="min-height: 340px">
          <div>
            <el-image
              style="width: 30px;height: 30px"
              :src="item.userIconUrl"
              :preview-src-list="[item.userIconUrl]"
              fit="fit"
            >
              <div slot="error" class="image-slot">
                <i style="font-size: 30px" class="el-icon-picture-outline"/>
              </div>
            </el-image>
            <div style="float: right">
              <i v-if="devModel" class="el-icon-circle-close text-red-300" @click="del(item)"/>
              <router-link
                :to="{ path:'/device/manage/'+item.deviceCore ,query:{'deviceCore':item.deviceCore}}"
              >
                <i class="el-icon-arrow-right"/>
              </router-link>
            </div>
          </div>
          <div class="text-sm">
            <div>{{ $t('user')+$t('name') }}: {{ item.userName }}</div>
            <div class="mt-1">{{ $t('device')+$t('name') }}: {{ item.deviceName }}</div>
            <div class="mt-1">{{ $t('deviceCore') }}: ({{ item.deviceCore }}<span class="ml-1">{{
                $t('port')
              }}:{{ item.port }}</span>)
            </div>
            <div class="mt-1">{{ $t('use') }}: {{ formatDeviceSettingTag(item) }}</div>
            <div class="mt-1">{{ $t('setting') }}: {{ item.name }}</div>
            <div class="mt-1">
              {{ $t('value') }}:
              <el-switch
                v-if="item.type === 'switch'"
                v-model="item.value"
                disabled
                active-value="1"
                inactive-value="0"
              />
              <div v-else-if="item.type === 'multiCustom'">
                <el-input
                  v-for="(item2,index2) in item.value.split(',')"
                  :key="index2"
                  style="width: 55px"
                  :value="item2"
                />
              </div>
              <span v-else>{{ item.value }}</span>
            </div>
            <div class="mt-1">{{ $t('time') }}: {{ item.spendTime }}ms</div>
            <div class="mt-1">{{ $t('status') }}: {{ formatDeviceSettingStatus(item) }}</div>
          </div>
          <div class="mt-1 text-xs text-right">
            <i class="el-icon-time"/>
            <span style="margin-left: 5px">{{ formatDate(item.createdDate) }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-table
      v-else
      ref="multipleTable"
      :data="historyList"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"/>
      <el-table-column :label="$t('icon')" width="60">
        <template slot-scope="scope">
          <el-image
            style="width: 40px;height: 40px;margin-top: 10px"
            :src="scope.row.userIconUrl"
            fit="fit"
          >
            <div slot="error" class="image-slot">
              <i style="font-size: 35px" class="el-icon-picture-outline"/>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column :label="$t('user')" prop="userName"/>
      <el-table-column :label="$t('status')" :formatter="formatDeviceSettingStatus" width="80"/>
      <el-table-column :label="$t('send')" :formatter="formatDeviceSettingTag"/>
      <el-table-column :label="$t('device')+$t('name')">
        <template slot-scope="scope">
          <router-link
            :to="{ path:'/device/manage/'+scope.row.deviceCore ,query:{'deviceCore':scope.row.deviceCore}}"
          >
            <i>{{ scope.row.deviceName }} ({{ scope.row.deviceCore }})</i>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column prop="name" :label="$t('setting')"/>
      <el-table-column :label="$t('port')" width="55" prop="port"/>
      <el-table-column :label="$t('value')">
        <template slot-scope="scope">
          <div v-if="scope.row.type === 'switch'">
            <el-switch
              v-model="scope.row.value"
              disabled
              active-value="1"
              inactive-value="0"
            />
          </div>
          <div v-else-if="scope.row.type === 'multiCustom'">
            <el-input
              style="width: 55px"
              v-for="(item,index) in scope.row.value.split(',')"
              :key="index"
              :value="item"
            />
          </div>
          <div v-else>
            <span>{{ scope.row.value }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('time')" sortable width="220">
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span style="margin-left: 13px">{{ formatDate(scope.row.createdDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="devModel" :label="$t('function')" width="80">
        <template slot-scope="scope">
          <el-button
            style="color: #f56c6c"
            type="text"
            icon="el-icon-delete"
            @click="del(scope.row)"
          >{{ $t('delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 15px 0;text-align: right">
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import {
  cancelNotice,
  formatDate,
  formatDeviceSetting,
  formatDeviceSettingStatus,
  formatDeviceSettingTag
} from '@/util/common'
import {
  deleteDeviceSettingHistory,
  deleteDeviceSettingHistoryList,
  pageGetAllDeviceSettingHistory,
  pageGetDeviceSettingHistory
} from '@/api/iot/iotDeviceSettingHistoryApi'
import { getCompanyId, getDeptId, getDevModel, getPageSize, setPageSize } from '@/util/storage'

export default {
  name: 'SettingHistory',
  data() {
    return {
      cardModel: true,
      historyList: [],
      currentPage: 1,
      total: 0,
      pageSize: getPageSize(),
      mCheck: false,
      mList: [],
      deviceName: null,
      deviceCore: null,
      companyId: getCompanyId(),
      deptId: null,
      devModel: getDevModel() === 'true'
    }
  },
  mounted() {
    const param = this.$route.query
    if (param != null) {
      this.deviceCore = param.deviceCore
      this.deviceName = param.deviceName
      if (this.deviceName) {
        this.setTagsViewTitle()
      }
      if (param.companyId) {
        this.companyId = parseInt(param.companyId)
      }
      if (param.isDept && param.isDept === '1') {
        this.deptId = parseInt(getDeptId())
      }
    }
    this.pageGetDeviceSettingHistory()
  },
  methods: {
    formatDate(time) {
      return formatDate(this, time)
    },
    setTagsViewTitle() {
      this.tempRoute = Object.assign({}, this.$route)
      const route = Object.assign({}, this.tempRoute, {
        title: `${this.deviceName}`
      })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    handleSelectionChange(value) {
      const mList = []
      value.forEach(function(row) {
        mList.push(row.historyId)
      })
      this.mList = mList
      if (mList.length > 0) {
        this.mCheck = true
      } else {
        this.mCheck = false
      }
    },
    formatDeviceSettingStatus(item) {
      return formatDeviceSettingStatus(this, item.status)
    },
    formatDeviceSettingTag(item) {
      return formatDeviceSettingTag(this, item.tag)
    },
    handleSizeChange(value) {
      this.pageSize = value
      setPageSize(this.pageSize)
      this.pageGetDeviceSettingHistory()
    },
    handleCurrentChange(item) {
      this.currentPage = item
      this.pageGetDeviceSettingHistory()
    },
    mDel() {
      const that = this
      this.$confirm(this.$t('deletePrompt'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteDeviceSettingHistoryList({
            idList: that.mList
          }).then(res => {
            const { code } = res
            if (code === '200') {
              that.pageGetDeviceSettingHistory()
            }
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    },
    del(index) {
      const that = this
      this.$confirm(this.$t('deletePrompt'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteDeviceSettingHistory({
            historyId: index.historyId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              that.pageGetDeviceSettingHistory()
            }
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    },
    pageGetDeviceSettingHistory() {
      let r
      if (this.companyId === 0) {
        r = pageGetAllDeviceSettingHistory({
          pageSize: this.pageSize,
          currentPage: this.currentPage
        })
      } else {
        r = pageGetDeviceSettingHistory({
          companyId: this.companyId,
          deptId: this.deptId,
          deviceCore: this.deviceCore,
          pageSize: this.pageSize,
          currentPage: this.currentPage
        })
      }
      r.then(res => {
        const historyList = []
        const { code, data } = res
        if (code === '200') {
          this.total = data.total
          data.data.forEach(item => {
            historyList.push(formatDeviceSetting(item))
          })
        }
        this.historyList = historyList
      })
    }
  }
}
</script>
